<head>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="add">插入数字</button>
        <button @click="remove">移除数字</button>
    </br>
        <transition-group name="numls" tag="p">
            <span v-for="item in items" :key="item" class="list-item">{{item}}</span>
        </transition-group>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                items:[1,2,3,4,5],
                nextNum:6
            },
            methods:{
                randomIndex(){
                    return Math.floor(Math.random() * this.items.length)
                },
                add(){
                    this.items.splice(this.randomIndex(), 0, this.nextNum++)
                    console.log(this.randomIndex.toString())
                },
                remove(){
                    this.items.splice(this.randomIndex(),1)
                }
            }
        })
    </script>
    <style>
        .list-item{
            background-color: red;
            display: inline-block;
            margin-right: 10px;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            text-align: center;
            line-height: 25px;
            color: aliceblue;
        }
        /* 开始插入/移除结束的位置变化 */
        .numls-enter, .numls-leave-to {
        opacity: 0;
        transform: translateY(30px);
        }
        /* 元素定位改变时动画 */
        .numls-move {
        transition: transform 1s;
        }
        /* 插入元素过程 */
        .numls-enter-active {
            transition: all 1s;
        }
        /* 移除元素过程 */
        .numls-leave-active {
            transition: all 1s;
            position: absolute;
        }
    </style>
</body>